<template>
  <div class="upload-certificate">
    <!-- 上传证书流程 （最后一步)(监管操作) -->

    <el-dialog v-model="currentPage" title="上传证书" width="850px" :before-close="handleClose">
      <el-form :model="pageConfig.form" ref="formRef" label-width="200px" :rules="pageConfig.rules">
        <el-form-item label="证书编号" prop="certificateNumber" style="width: 100%">
          <el-input v-model.trim="pageConfig.form.certificateNumber" placeholder="请输入证书编号" />
        </el-form-item>
        <el-form-item label="证书名称" prop="certificateName" style="width: 100%">
          <el-input v-model.trim="pageConfig.form.certificateName" placeholder="请输入证书名称" />
        </el-form-item>
        <el-form-item label="证书的具体名称" prop="issuingOrganization" style="width: 100%">
          <el-input v-model.trim="pageConfig.form.issuingOrganization" placeholder="请输入颁发机构" />
        </el-form-item>

        <el-form-item label="证书的颁发日期" prop="issueDate" style="width: 100%">
          <el-date-picker
            v-model="pageConfig.form.issueDate"
            placeholder="选择证书的颁发日期"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disablePastDates"
            style="width: 100%; height: 32px" />
        </el-form-item>

        <el-form-item label="证书有效期的起始日期" prop="validityStartDate" style="width: 100%">
          <el-date-picker
            v-model="pageConfig.form.validityStartDate"
            placeholder="选择证书有效期的起始日期"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disablePastDates"
            style="width: 100%; height: 32px" />
        </el-form-item>
        <el-form-item label="证书有效期的结束日期" prop="validityEndDate" style="width: 100%">
          <el-date-picker
            v-model="pageConfig.form.validityEndDate"
            placeholder="选择证书有效期的结束日期"
            type="date"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            :disabled-date="disablePastDates"
            style="width: 100%; height: 32px" />
        </el-form-item>
        <el-form-item label="证书图片" prop="imageUrl" style="width: 100%">
          <FileUpload :fileType="['png', 'jpg']" v-model="pageConfig.form.imageUrl" />
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit(formRef)" :loading="pageConfig.submitLoading"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import FileUpload from "@/components/FileUpload";
import { toRefs, watchEffect, reactive } from "vue";
import { addCertificate, updateState } from "@/api/flowInfo/info";
const router = useRouter();
const route = useRoute();

const emit = defineEmits();
const props = defineProps({
  open: {
    type: Boolean,
    default: false,
  },
  // 流程发起人deptId
  deptId: {
    type: String,
    default: "",
  },
});
const { proxy } = getCurrentInstance();

const currentPage = computed({
  get() {
    return props.open;
  },
  set(val) {
    emit("update:open", val);
  },
});
const pageConfig = reactive({
  // 遮罩层
  submitLoading: false,
  // 表单
  form: {},
  // 表单校验
  rules: {
    certificateNumber: [{ required: true, message: "证书编号不能为空", trigger: "blur" }],
    certificateName: [{ required: true, message: "证书名称不能为空", trigger: "blur" }],
    issuingOrganization: [{ required: true, message: "颁发机构名称不能为空", trigger: "blur" }],
    issueDate: [{ required: true, message: "证书的颁发日期不能为空", trigger: "blur" }],
    validityStartDate: [{ required: true, message: "证书有效期的起始日期不能为空", trigger: "blur" }],
    validityEndDate: [{ required: true, message: "证书有效期的结束日期不能为空", trigger: "blur" }],
    imageUrl: [{ required: true, message: "证书图片不能为空", trigger: "blur" }],
  },
});
// 关闭弹窗
function handleClose() {
  currentPage.value = false;
}
// form 实例
const formRef = ref();
// 提交证书
function handleSubmit(formEl) {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
      pageConfig.submitLoading = true;
      pageConfig.form.deptId = props.deptId;
      addCertificate(pageConfig.form)
        .then(() => {
          currentPage.value = false;
          proxy.$modal.msgSuccess("操作成功！");
          setTimeout(() => {
            updateState({
              flowId: route.query.flowId,
              flowNode: "H",
            }).then(() => {
              const path = "/certificatePreReview/index";
              router.push({ path: path });
            });
          }, 1000);
        })
        .finally(() => {
          pageConfig.submitLoading = false;
        });
    }
  });
}
</script>

<style scoped lang="scss"></style>
